// var window.innerWidth = window.c;
// var window.innerHeight = window.innerHeight;
// var VIEWPORT_RATIO = 0.73;
var PANEL_WIDTH = 310;
var outliner;
var propertyPanel;
var PANLE_NUMBER = 2;
var PANLE_NUMBER_TOP = 4;//右上方面板的个数
var SHEET_NUMBER = 4;

window.onload = initUI;

function initUI(){
	//初始化界面
	var TOOL_WIDTH = document.getElementById("Qtools").offsetWidth;
	var MENU_HEIGHT = document.getElementsByClassName("menuLink")[0].offsetHeight;

	viewPortResize(TOOL_WIDTH,MENU_HEIGHT);

	initMenu();
	initTools();
	
	
	initPanel(TOOL_WIDTH,MENU_HEIGHT);

	//为three.js的内容提供参数
	var width = document.getElementById("canvas-frame").clientWidth;
    var height = document.getElementById("canvas-frame").clientHeight;

    outliner = new Outliner();
    propertyPanel = new PropertyPanel();
    materialPanel = new MaterialPanel();
    modifierViewer = new ModifierViewer();
    modifierSelectorViewer = new ModifierSelectorViewer();
    threeStart(width,height);

    
	window.addEventListener( 'resize', onWindowResize, false );
}

function initMenu(){
	var menus = document.getElementsByTagName("a");
	for (var i = 0;i < menus.length; i++) {
		if (menus[i].className.indexOf('menuLink') > -1) {
			menus[i].onclick = function(){return false};
			menus[i].onmouseover = toggleMenu;
		};
	}
}	

function toggleMenu(){
	var startIndex = this.href.lastIndexOf('/') + 1;
	var endIndex = this.href.lastIndexOf('.');
	var menuName = this.href.substring(startIndex,endIndex);
	var menuStyle = document.getElementById(menuName).style;
	menuStyle.display = 'block';
	this.parentNode.onmouseover = function(){
		menuStyle.display = 'block';
	}
	this.parentNode.onmouseout = function(){
		menuStyle.display = 'none';
	}
}

function initTools(){
	var tools = document.getElementById("Qtools");
	tools.style.height = window.innerHeight - 38 + "px";


	var move_btn = document.getElementById('move');
	var rotate_btn = document.getElementById('rotate');
	var scale_btn = document.getElementById('scale');
	var delete_btn = document.getElementById('delete');
	var copy_btn = document.getElementById('copy');

	move_btn.addEventListener('click', function(){		
		if(move_btn.src.indexOf('move.png') > 0 || move_btn.src.indexOf('move_h.png') > 0){
			move_btn.src = "images/move_v.png";
			rotate_btn.src = "images/rotate.png";
			scale_btn.src = "images/scale.png";
			// copy_btn.src = "images/copy.png";
			// delete_btn.src = "images/delete.png";

		}
		else {
			move_btn.src = "images/move.png";
		}
	});
	move_btn.addEventListener('mouseover', function(){
		if(move_btn.src.indexOf('move.png') > 0)
			move_btn.src = "images/move_h.png";
	});
	move_btn.addEventListener('mouseout', function(){
		if(move_btn.src.indexOf('move_h.png') > 0){
			move_btn.src = "images/move.png";
		}
		
	});


	rotate_btn.addEventListener('click', function(){;
		if(rotate_btn.src.indexOf('rotate.png') > 0 || rotate_btn.src.indexOf('rotate_h.png') > 0){
			move_btn.src = "images/move.png";
			rotate_btn.src = "images/rotate_v.png";
			scale_btn.src = "images/scale.png";
			// copy_btn.src = "images/copy.png";
			// delete_btn.src = "images/delete.png";
		}
		
		else {
			rotate_btn.src = "images/rotate.png";
		}
	});
	rotate_btn.addEventListener('mouseover', function(){
		if(rotate_btn.src.indexOf('rotate.png') > 0)
			rotate_btn.src = "images/rotate_h.png";
	});
	rotate_btn.addEventListener('mouseout', function(){
		if(rotate_btn.src.indexOf('rotate_h.png') > 0)
		rotate_btn.src = "images/rotate.png";
	});


	scale_btn.addEventListener('click', function(){
		if(scale_btn.src.indexOf('scale.png') > 0 || scale_btn.src.indexOf('scale_h.png') > 0){
			scale_btn.src = "images/scale_v.png";
			move_btn.src = "images/move.png";
			rotate_btn.src = "images/rotate.png";
			// copy_btn.src = "images/copy.png";
			// delete_btn.src = "images/delete.png";
		}
		else {
			scale_btn.src = "images/scale.png";
		}
	});
	scale_btn.addEventListener('mouseover', function(){
		if(scale_btn.src.indexOf('scale.png') > 0)
			scale_btn.src = "images/scale_h.png";
	});
	scale_btn.addEventListener('mouseout', function(){
		if(scale_btn.src.indexOf('scale_h.png') > 0)
		scale_btn.src = "images/scale.png";
	});


	delete_btn.addEventListener('mousedown', function(){		
		// if(delete_btn.src.indexOf('delete.png') > 0 || delete_btn.src.indexOf('delete_h.png') > 0){
			move_btn.src = "images/move.png";
			delete_btn.src = "images/delete_v.png";
			rotate_btn.src = "images/rotate.png";
			scale_btn.src = "images/scale.png";
			// copy_btn.src = "images/copy.png";
		// }
		// else {
			// delete_btn.src = "images/delete.png";
		// }
	});
	delete_btn.addEventListener('mouseup',function(){
		delete_btn.src = "images/delete.png";
	});
	delete_btn.addEventListener('mouseover', function(){
		if(delete_btn.src.indexOf('delete.png') > 0)
			delete_btn.src = "images/delete_h.png";
	});
	delete_btn.addEventListener('mouseout', function(){
		if(delete_btn.src.indexOf('delete_h.png') > 0){
			delete_btn.src = "images/delete.png";
		}
		
	});


	copy_btn.addEventListener('mousedown', function(){		
		// if(copy_btn.src.indexOf('copy.png') > 0 || copy_btn.src.indexOf('copy_h.png') > 0){
			move_btn.src = "images/move.png";
			copy_btn.src = "images/copy_v.png";
			rotate_btn.src = "images/rotate.png";
			scale_btn.src = "images/scale.png";
			// delete_btn.src = "images/delete.png";
		// }
		// else {
			// copy_btn.src = "images/copy.png";
		// }
	});

	copy_btn.addEventListener('mouseup',function(){
		copy_btn.src = "images/copy.png";
	});

	copy_btn.addEventListener('mouseover', function(){
		if(copy_btn.src.indexOf('copy.png') > 0)
			copy_btn.src = "images/copy_h.png";
	});
	copy_btn.addEventListener('mouseout', function(){
		if(copy_btn.src.indexOf('copy_h.png') > 0){
			copy_btn.src = "images/copy.png";
		}
		
	});
}

//这里的width和height是指要除视口部分，其他部分的宽度和高度
function viewPortResize(width,height){
	document.getElementById("canvas-frame").style.width = window.innerWidth - width - PANEL_WIDTH + 'px';
	document.getElementById("canvas-frame").style.height = (window.innerHeight - height) + 'px';
	// document.getElementById("canvas-frame").style.width = window.innerWidth - 38 + "px";
	
}

function initPanel(width,height){
	document.getElementById("Qpanel").style.height = (window.innerHeight - height) + 'px';
	document.getElementById("Qpanel").style.width = PANEL_WIDTH + 'px';
   
	var panel_group1=document.getElementById('panel_group1');
	var panel_group2=document.getElementById('panel_group2');
	var outliner = document.getElementById('outliner');
	var aBtn= panel_group1.getElementsByTagName('input');
	// var aDiv= panel_group1.getElementsByTagName('div');
	// console.log(aDiv);
	// console.log(panel_group1.childNodes);
	var aDiv = [];
    var aDivTemp=panel_group1.childNodes;
    for(index in panel_group1.childNodes){
    	if(aDivTemp[index].nodeName == 'DIV')
 // console.log(panel_group1.childNodes[index].nodeName);
    		aDiv.push(aDivTemp[index]);
    }
    var aBtn1=panel_group2.getElementsByTagName('input');
    // var aDiv1=panel_group2.getElementsByTagName('div');
    var aDiv1=document.getElementsByName('panel_below');
    // var aDiv1=panel_group2.children;

 	// var aBtn=panel_group1.getElementsByName('input');
  //   var aDiv=panel_group1.getElementsByTagName('div');
  //   var aBtn1=panel_group2.getElementsByName('input');
  //   var aDiv1=panel_group2.getElementsByTagName('div');
    
    var panels = document.getElementsByClassName('panel');
    var PANEL_RATIO = 0.25;
    // outliner.style.height = window.innerHeight * PANEL_RATIO*0.9 + "px";
    var INPUT_HEIGHT = panel_group1.getElementsByTagName('input')[0].offsetHeight;
    for(var i = 0;i < panels.length;i++){
    	panels[i].style.width = PANEL_WIDTH + 'px';
    	if(i < PANLE_NUMBER_TOP)
    		panels[i].style.height = window.innerHeight * PANEL_RATIO + "px";
    	else
    		panels[i].style.minHeight = window.innerHeight * (1-PANEL_RATIO)- height - INPUT_HEIGHT * 2 - 4 + "px";
    		// panels[i].style.minHeight = window.innerHeight/4*3 - 106  + "px";
    }
   
        
        for(var i=0;i<PANLE_NUMBER_TOP;i++){			//遍历div1中的按钮
          
          aBtn[i].index=i;			//给aBth[]添加自定义属性
          aBtn[i].onclick=function (){
            
            for(var i=0;i<aBtn.length;i++){	//遍历按钮，将class清除
              aBtn[i].className='';
              aDiv[i].style.display='none';
            }
            this.className='active';
            aDiv[this.index].style.display='block';
          }
        }
        
    for(var i=0;i<PANLE_NUMBER;i++){			//遍历div2中的按钮
      
      aBtn1[i].index=i;			//给aBth[]添加自定义属性

      aBtn1[i].onclick=function (){
        for(var i=0;i<PANLE_NUMBER;i++){	//遍历按钮，将class清除
          aBtn1[i].className='';
          aDiv1[i].style.display='none';
          // console.log(aBtn1[i].style);
          
          // console.log("aBtn1[]"+i);
          // console.log(aBtn1[i]);
          // console.log("aDiv1[]"+i);
          // console.log(aDiv1[i]);
          
        }
        this.className='active';
        aDiv1[this.index].style.display='block';
        // console.log('');
      }
    }


    var images = panel_group1.getElementsByTagName('img');
    for(var i = 0;i < images.length;i++){
    	images[i].addEventListener('mouseover',function(evt){evt.target.src = "images/"+evt.target.id+"_h.png";});
    	images[i].addEventListener('mouseout',function(evt){evt.target.src = "images/"+evt.target.id+".png";});
    	images[i].addEventListener('mousedown',function(evt){evt.target.src = "images/"+evt.target.id+"_click.png";});
    	images[i].addEventListener('mouseup',function(evt){evt.target.src = "images/"+evt.target.id+".png";});
    }
}

function onWindowResize(){
	var TOOL_WIDTH = document.getElementById("Qtools").offsetWidth;
	var MENU_HEIGHT = document.getElementsByClassName("menuLink")[0].offsetHeight;
	viewPortResize(TOOL_WIDTH,MENU_HEIGHT);
	threeUpdate(document.getElementById("canvas-frame").clientWidth,document.getElementById("canvas-frame").clientHeight);
}


